<template>
  <div
    class="container"
    v-infinite-scroll="load"
    :infinite-scroll-immediate="false"
  >
    <div class="title">歌手</div>
    <div class="screen_condition">
      <div class="condition_list">
        <el-tag
          @click="letterChange(index)"
          v-for="(item, index) in typeJson.letter"
          :key="index"
          :effect="letterCurrent == index ? 'dark' : 'plain'"
          >{{ item.name }}</el-tag
        >
      </div>
      <div class="condition_list">
        <el-tag
          @click="tagChange(index)"
          v-for="(item, index) in tagList"
          :key="index"
          :effect="tagCurrent == index ? 'dark' : 'plain'"
          >{{ item.name }}</el-tag
        >
      </div>
      <div class="condition_list">
        <el-tag
          @click="genderChange(index)"
          v-for="(item, index) in typeJson.gender"
          :key="index"
          :effect="genderCurrent == index ? 'dark' : 'plain'"
          >{{ item.name }}</el-tag
        >
      </div>
      <div class="condition_list">
        <el-tag
          @click="styleChange(index)"
          v-for="(item, index) in styleList"
          :key="index"
          :effect="styleCurrent == index ? 'dark' : 'plain'"
          >{{ item.name }}</el-tag
        >
      </div>
    </div>
    <div class="singer">
      <div class="top">
        <div
          class="item"
          @click="onInfo(item)"
          v-for="(item, index) in topUserList"
          :key="index"
        >
          <el-avatar :size="150" :src="baseUrl + item.avatar" />
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="names">
        <span
          @click="onInfo(item)"
          v-for="(item, index) in userList"
          :key="index"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { userIndex, styleIndex, tagIndex } from "@/http/api";
import typeJson from "./json";
const baseUrl = import.meta.env.VITE_API_URL;
const router = useRouter();

const letterCurrent = ref(0);
const genderCurrent = ref(0);
const tagCurrent = ref(0);
const styleCurrent = ref(0);
const page = ref(1);
const more = ref(true);
const isReady = ref(false);
const tagList = ref([]);
const styleList = ref([]);

const topUserList = ref([]);
const userList = ref([]);

onMounted(() => {
  Promise.all([getTag(), getStyle()]).then(() => {
    isReady.value = true;
    getSongerList();
  });
});

const letterChange = (i) => {
  letterCurrent.value = i;
  initList();
};
const tagChange = (i) => {
  tagCurrent.value = i;
  initList();
};
const genderChange = (i) => {
  genderCurrent.value = i;
  initList();
};
const styleChange = (i) => {
  styleCurrent.value = i;
  initList();
};

const initList = () => {
  page.value = 1;
  topUserList.value = [];
  userList.value = [];
  getSongerList();
};

// 筛选条件
const getTag = async () => {
  const { data } = await tagIndex();
  tagList.value = [
    {
      name: "全部",
      id: "",
    },
    ...data.tag,
  ];
};
const getStyle = async () => {
  const { data } = await styleIndex();
  styleList.value = [
    {
      name: "全部",
      id: "",
    },
    ...data.style,
  ];
};

const getSongerList = async () => {
  const { data } = await userIndex({
    word: typeJson.letter[letterCurrent.value].key,
    style: styleList.value[styleCurrent.value].id,
    sex: typeJson.gender[genderCurrent.value].key,
    tag: tagList.value[tagCurrent.value].id,
    page: page.value,
    limit: 100,
  });
  if (page.value == 1) {
    topUserList.value = data.user.data.slice(0, 12);
    userList.value = data.user.data.slice(12, 100);
  } else {
    data.user.data.length
      ? userList.value.push(...data.user.data)
      : (more.value = false);
    console.log(more.value);
  }
};

const onInfo = (e) => {
  console.log(e);
  router.push({
    path: "/user",
    query: {
      id: e.id,
    },
  });
};

const load = async () => {
  if (more.value && isReady.value) {
    page.value++;
    getSongerList();
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
